<template>
<div>
<el-dialog
    width="1500px"
    v-if="visible"
    :close-on-click-modal="false"
    :visible.sync="visible">
<el-container style="">
  <el-aside style="width:280px;height:500px;border: 1px solid #ddd;overflow: auto;">
  <el-input placeholder="输入关键字进行过滤" v-model="filterText" class="filter-input-text"></el-input>
      <el-tree
        :props = "props1"
        :highlight-current='true'
        :load = "loadNode"
        @node-click = "clickNode"
        @current-change = "changeCurrent"
        :filter-node-method = "filterNode"
        :expand-on-click-node = false
        :accordion = true
        lazy
        node-key ="id"
        :key="treeKey"
        ref ="tree">
          <span slot-scope="{ node, data }">
            <i v-if="parseInt(data.type.isCreateAddress) === 1" class="iconfont icon-address"></i>
            <i v-else class="iconfont icon-region"></i>
            <span style="padding-left: 0px;">{{node.label}}</span>
          </span>
      </el-tree>
  </el-aside>
  <el-container style="margin-top:-20px;">
    <el-main style="width:330px;">
        <div style="width:400px;" v-if="devicePermissonManagerVisible"><devicePermissonManager ref="devicePermissonManager"  @refresh="refresh"></devicePermissonManager></div>
        <div v-else class="no-data">暂无数据</div>
    </el-main>
  </el-container>
  <el-container style="margin-top:-20px;">
    <el-main style="padding:20px 20px 20px 1px;width:630px;">
        <div style="width:700px;" v-if="allDevicePermissonVisible"><AllDevicePermisson ref="AllDevicePermisson"  @refresh="refresh"></AllDevicePermisson></div>
        <div v-else class="no-data">暂无数据</div>
    </el-main>
  </el-container>
</el-container>
</el-dialog>
</div>
</template>

<script>
import { validatenull } from "@/utils/validate";
import devicePermissonManager from "./devicePermissonManager";
import AllDevicePermisson from "./AllDevicePermisson";
import { setTimeout } from "timers";
export default {
  components: {
    devicePermissonManager,
    AllDevicePermisson
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      communityId: "",
      regionId: "",
      visible: false,
      populationCoding: "",
      //搜索过滤的值
      filterText: "",
      tabName: "",
      addressName: [],
      devicePermissonManagerVisible: false,
      allDevicePermissonVisible:false,
      resolve: "",
      treeKey: "", // 控制tree渲染的key
      props1: {
        label: "name",
        children: "child",
        isLeaf: function(data, node) {
          if (data.isLeaf === 1) {
            return true;
          }
          return false;
        },
        disabled: "disabled"
      },
      activeName: "first"
    };
  },
  computed: {
  },
  mounted () {
  },
  created() {
  },
  activated() {
  },

  methods: {
    close() {
      this.visible = false;
    },
    refresh(){
      this.$nextTick(() => {
          // 根据区域id获取设备表并且是带勾选的
          if(this.regionId !== null && ""!==this.regionId.trim()){
            this.$refs.devicePermissonManager.init(
            this.regionId,
            this.populationCoding,
            this.communityId
            );
          }

          this.$refs.AllDevicePermisson.init(
            this.regionId,
            this.populationCoding,
            this.communityId
          );
        });
    },
    init(populationCoding) {
      this.visible = true;
      this.populationCoding = populationCoding;
      // this.$nextTick(() => {
      //     // 根据区域id获取设备表并且是带勾选的
      //     this.$refs.AllDevicePermisson.init(
      //       data.id,
      //       this.populationCoding,
      //       this.communityId
      //     );
      //   });

    },
    // table选项切换触发的事件
    handleClick({ name }) {
      this.tabName = name;
    },
    loadNode(node, resolve) {
      if(node.level === 0){
        // 加载该人员有的权限信息
        this.devicePermissonManagerVisible = true;
        this.allDevicePermissonVisible = true;
        this.$nextTick(() => {
          // 根据区域id获取设备表并且是带勾选的
          this.$refs.AllDevicePermisson.init(
            null,
            this.populationCoding,
            sessionStorage.getItem(
                "thiscommunityId"
              )
          );
        });
      }


      if (node.data) {
        if (node.data.type.id === 42) {
          this.communityId = node.data.id;
        }
      }
      this.resolve = resolve;
      // 如果没有小区id说明是管理员
      if (validatenull(sessionStorage.getItem("thiscommunityId"))) {
        if (node.level === 0) {
          return resolve([
            { id: "0", name: "行政区域选择", isLeaf: false, type: { id: 0 } }
          ]);
        } else {
          this.$http({
            url: `/dg-standard-info/dgstandardregion/regionbyparentid/${
              node.data.id
            }`,
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              return resolve(data.data);
            }
          });
        }
      } else {

        if (node.level === 0) {
          this.$http({
            url: `/dg-standard-info/dgstandardregion/info/${sessionStorage.getItem(
              "thiscommunityId"
            )}`,
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              return resolve([
                {
                  id: data.data.id,
                  name: data.data.name,
                  isLeaf: false,
                  type: {
                    isCreateAddress: 1,
                    id: 1
                  }
                }
              ]);
            }
          });
        } else {
          this.$http({
            url: `/dg-standard-info/dgstandardregion/regionbyparentid/${
              node.data.id
            }`,
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              return resolve(data.data);
            }
          });
        }
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },
    refreshNode(node) {
      this.$http({
        url: `/dg-standard-info/dgstandardregion/regionbyparentid/${
          node.data.id
        }`,
        method: "get",
        params: this.$http.adornParams()
      }).then(({ data }) => {
        if (data && data.code === 0) {
          node.loaded = true;
          node.loading = false;
          node.childNodes = [];
          node.doCreateChildren(data.data);
          node.updateLeafState();
        }
      });
    },
    // Todothis.$refs.regionManager != undefined暂时解决第一次点击报错问题
    changeCurrent(data, node) {
      if (this.addressId != node.data.id) {
        this.$nextTick(() => {
          setTimeout(() => {
            if (this.$refs.regionManager !== undefined) {
              this.$refs.regionManager.isDisable = true;
            }
          }, 1000);
        });
      }
    },
    clickNode(data, node, self) {
      //this.$store.commit("address/updateRegionId", data.id);
      this.regionId = data.id; // 当前区域id
      this.global.setTreeNode(node);
      this.global.setRefreshNode(this.refreshNode);
      if (data.type.id == 42) {
        this.communityId = data.id;
      }
      // 可以创建
      if (parseInt(data.type.isCreateAddress) === 1) {
        this.devicePermissonManagerVisible = true;
        // this.allDevicePermissonVisible = true;
        this.$nextTick(() => {
          // 根据区域id获取设备表并且是带勾选的
          this.$refs.devicePermissonManager.init(
            data.id,
            this.populationCoding,
            this.communityId
          );
          // this.$refs.AllDevicePermisson.init(
          //   data.id,
          //   this.populationCoding,
          //   this.communityId
          // );
        });
      } else {
      }
    }
  }
};
</script>

<style lang="scss" >
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  color: blue;
  background-color: white;
}
.tabs {
  height: 600px;
}
.tabs .no-data {
  font-size: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #909399;
}

.filter-input-text .el-input__inner {
  border-radius: 0;
  border: 0px solid #dcdfe6;
  border-bottom: 1px solid #dcdfe6;
}
</style>
